<html>
<head>
<title>OpenID Login without refreshing or leaving the page</title>
<style type="text/css">
#container {
 padding: 1em;
 font-family: Tahoma,Verdana;
}
.top {
 color: #fff;
 padding: 0 5px;
 background-color: green;
}
.top p {
 font-size: 1.6em;
}
.green {
 color: green;
}
.red {
 color: red;
}
.init {
 display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<!--
function getCenteredCoords(width, height) {
  return {x: $(window).width()/2-width/2, y: $(window).height()/2-height/2};
}

function handleOpenIDResponse(openid_args) {
  $("#login").hide();
  $("#msg").html("<p>Verifying authentication ...</p>");
  $.ajax({
    type: "POST",
    url: "popup_verify/",
    data: openid_args,
    dataType: "json",
    success: function(user){
      $("#content").hide();
      $("#logout").show();
      $("#msg").html("<p><span class='green'>" + user.b + "</span> is authenticated.</p>")
      var renderDiv = $("#info > div").hide();
      renderDiv.find("span").empty();
      renderDiv.show();
      var info = user.g ? user.g.info : {};
      for(var i in info)
        renderDiv.find("span." + i).html(info[i])
      $("#content").show(1000);
    },
    error: function(xhr, errStatus, errMessage) {
      $("#content").hide();
      $("#login").show();
      $("#logout").hide();
      $("#msg").html("<p class='red'>Login failed.  Please try again.</p>");
      $("#info > div").hide().find("span").empty();
      $("#content").show(1000);
    }
  });
}

$(function(){
  $("#login").click(function(e){
    var w = window.open("home/?popup=true", "openid_popup", "width=450,height=500,location=1,status=1,resizable=yes");
    var coords = getCenteredCoords(450,500);
    w.moveTo(coords.x, coords.y);
  });
  $("#logout").click(function(e){
    $.ajax({
      type: "GET",
      url: "popup_verify/?logout=true",
      success: function(text){
        $("#content").hide();
        $("#logout").hide();
        $("#login").show();
        $("#msg").html("<p>You are currently not logged in.</p>");
        $("#info > div").hide().find("span").empty();
        $("#content").show(1000);
      }
    });
  });
  $.ajax({
    type: "GET",
    url: "popup_verify/",
    dataType: "json",
    success: function(user){
      $(".init").hide().removeClass("init");
      $("#login").hide();
      $("#logout").show();
      $("#msg").html("<p><span class='green'>" + user.b + "</span> is authenticated.</p>");
      var renderDiv = $("#info > div").hide();
      renderDiv.find("span").empty();
      renderDiv.show();
      var info = user.g ? user.g.info : {};
      for(var i in info)
        renderDiv.find("span." + i).html(info[i])
      $("#content").show(1000);
    },
    error: function(xhr, errStatus, errMessage) {
      $("#logout").hide();
      $("#login").show();
      $("#msg").html("<p>You are currently not logged in.</p>");
      $("#info > div").hide().find("span").empty();
      $(".init").hide().removeClass("init").show(1000);
    }
  });
  
});
//-->
</script>

</head>
<body>
<div id="container">
  <div class="top">
    <p>OpenID Login without refreshing or leaving the page</p>
  </div>
  <div id="content" class="init">
    <button id="login">Login</button>
    <button id="logout">Logout</button>
    <div id="msg"></div>
    <div id="info">
      <div class="email">email: <span class="green email"></span></div>
      <div class="country">country: <span class="green country"></span></div>
      <div class="language">language: <span class="green language"></span></div>
    </div>
  </div>
</div>
</body>
</html>
